<template>
    <div class="shopcart">
        <myheader title="购物车" :back="true" :more="false" ></myheader>
        <div class="mui-card" v-for="(item,index) in shopcartgoods" :key="item.id">
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                    <span :class="item.selected?'active':'radio'" @click="changeStatus(item.id)"></span>
                    <img :src="item.img" alt="" @click="goToGoodsInfo(item.id)">
                    <div class="right">
                        <h4 @click="goToGoodsInfo(item.id)">{{item.title}}</h4>
                        <div class="bottom">
                            <span class="price">{{item.price | priceFormat}}</span>
                            <div class="mui-numbox" style="width: 80px;height: 30px">
                                <button class="mui-btn mui-btn-numbox-minus" type="button" @click="decrease(item.id,item)">-</button>
                                <input class="mui-input-numbox" type="number" :value="item.count"/>
                                <button class="mui-btn mui-btn-numbox-plus" type="button" @click="increase(item.id,item)">+</button>
                            </div>
                            <mt-button size="small" type="danger" @click="deletegoods(index)">删除</mt-button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <account></account>
    </div>
</template>

<script>
    import myheader from '../components/Header'
    import account from '../views/goods/account'
    import {Toast,MessageBox} from 'mint-ui'
    export default {
        name: "Shopcart",
        components:{
            myheader,
            account
        },
        computed:{
            shopcartgoods(){
                return this.$store.state.shopcartdata
            }

        },
        methods:{
            changeStatus(id){ //改变我们商品的选择状态
                this.$store.commit('CHANGE_STATUS',id)
            },
            increase(id,item){//调用store中的mutation方法，去修改对应商品的数量 --增加

                if (item.count>=item.stock){
                    Toast('亲！您要的数量太多了，超出我们的库存了！')
                }
                this.$store.commit('INCREASE',id);
            },
            decrease(id,item){//调用store中的mutation方法，去修改对应商品的数量 --减少
                if (item.count<=1){
                    Toast('亲！您最少买一件哦！')
                }
                this.$store.commit('DECREASE',id)
            },
            goToGoodsInfo(id){ // 使用编程式导航的方式，跳转到对应的商品详细页
                this.$router.push('/home/goodsinfo/'+id)
            },
            deletegoods(i){ //点击删除按钮，调用mutation，中的DELETEGOODS方法
                //添加了一个mint -ui的confirm组件，来实现一个确认的效果
                MessageBox.confirm('您确定要删除这个商品吗?','移除商品').then(action => {
                    this.$store.commit('DELETE_GOODS',i)
                },cancel=>{return});

            }

        }
    }
</script>

<style scoped lang="scss">
    @import "../assets/style.scss";
.mui-card-content-inner{
    display: flex;
    justify-content: space-between;
    align-items: center;
    .radio{
        display: inline-block;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        border: 2px solid #CCCCCC;
    }
    .active{
        display: inline-block;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background-color: $primary-text-color;
    }
    img{
        width: 60px;
    }
    .right{
        width: 68%;
        h4{
            font-size: 14px;
            margin-bottom: 15px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .bottom{
            display: flex;
            justify-content: space-between;
            align-items: center;
            .price{
                color: red;
                font-size: 18px;
            }
            .mui-numbox{
                padding: 0 25px 0 25px;
            }
            .mui-numbox [class*=btn-numbox]{
                width: 25px;
            }
        }
    }
}
</style>
